<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>


    <div id="message_box">

    </div>
    <div id="one">




        <div class="form-structor" id="form-structor">
            <nav>
                <ul>
                    <li id="min"></li>
                    <li id="close"></li>
                </ul>
            </nav>
            <header>
                <div class="logo_CN" id="signup">
                    <img src="./images/逆.png" alt="逆" width="58" height="56">
                    <img src="./images/水.png" alt="水" width="42" height="42" style="margin-top: 12px;">
                    <img src="./images/寒.png" alt="寒" width="42" height="44" style="margin-top: 12px;">
                </div>
                <div class="logo_EN">
                    <img src="./images/Answer.png" alt="Answer" width="120" height="33" style="margin-top: 8px">
                </div>

            </header>
            <div class="signup">
                <!-- <h2 class="form-title" id="signup">
                        Sign up</h2> -->
                <!-- <div class="form-holder">
                        <input type="text" class="input" placeholder="Name" />
                        <input type="email" class="input" placeholder="Email" />
                        <input type="password" class="input" placeholder="Password" />
                    </div> -->
                <button class="submit-btn" id="copy">Ctrl+V粘贴截图</button>
            </div>
            <div class="login slide-up">
                <div class="center">
                    <h2 class="form-title" id="login" style="cursor: pointer;">
                        设 置</h2>
                    <div class="form-holder">
                        <input type="text" class="input" id="OcrUrl" placeholder="OcrUrl" />
                        <input type="text" class="input" id="AccessTokenUrl" placeholder="AccessTokenUrl" />
                        <input type="text" class="input" id="AK" placeholder="AK" />
                        <input type="text" class="input" id="SK" placeholder="SK" />
                        <input type="text" class="input" id="AccessToken" placeholder="AccessToken 选填" />





                    </div>
                    <button class="submit-btn" id="preservation">保 存</button>
                </div>
            </div>
        </div>


        <div class="tow" id="tow">
            <nav>
                <p style="    float: left;
                        color: #fff;
                        margin-left: 15px;
                        margin-top: 12px;
                        letter-spacing: 2px;">Answer</p>
                <ul>
                    <li id="min2"></li>
                    <li id="close2"></li>
                </ul>
            </nav>
            <!-- 搜索输入框 -->
            <textarea name="" id="textarea_text" cols="30" rows="3"></textarea>

            <div id="re_search">
                <img src="./images/icons8_Search.png" alt="" width="16">
            </div>
            <div id="solveBox">

                    <p style="color: #Fff;font-size: 12px;">
                        <img style="vertical-align:middle;cursor:pointer;" id="solve" src="./images/icons8_Ok_52px.png" alt="ok"
                            width="30">&#32;&#12288;是否解决?&#12288;
                        <img id="notSolve" src="./images/icons8_Cancel_52px.png" style="vertical-align:middle;cursor:pointer;"
                            alt="cancel" width="30">
                    </p>

                </div>
            <!-- 检索Retrieval -->
            <div class="retrieval" id="retrieval">
                
                <p class="item">

                    <span>

                    </span>
                </p>

            </div>
            <!-- 搜索Search -->
            <div class="search" id="search">
                <div class="title">
                    <p>题库中未找到相关问题!</p>
                </div>
                <div>
                    <div id="tosearch">
                        <img src="./images/baidu_1193371_easyicon.net.png" alt="baidu" width="40">
                    </div>

                </div>
            </div>
            <div id="back">
                <img src="./images/icons8_Undo_24px.png" alt="back" height="24" width="24">
            </div>
            <div id="towsearch">
                <img src="./images/baidu_1193371_easyicon.net.png" alt="baidu" width="30">
            </div>
        </div>
    </div>

    <div id="loading">
        <div class="cube">
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
            <div class="side"></div>
        </div>
    </div>
    <div>

    </div>
    <script src="./axiosPackage.js"></script>
    <script>
        // document.getElementById('tow').style.display = 'block'
        // document.getElementById('retrieval').style.display = 'block'
        // document.getElementById('search').style.display = 'none'
        // document.getElementById('towsearch').style.display = 'block'



        // document.getElementById('form-structor').style.display = 'none'
        //图片base64
        let imageBase = ''
        //ocr 识别的描述
        let describe = ''
        /**
         * 加载状态
         * ------------------------------------------------------------------
         */

        function loadingStart() {
            let loading = document.getElementById('loading')
            loading.style.display = 'block'
        }

        function loadingEnd() {
            let loading = document.getElementById('loading')
            loading.style.display = 'none'
        }


        /**
         * 通知框 状态
         * ------------------------------------------------------------------
         */

        function messageBox(text, type) {

            let message_box = document.getElementById('message_box')
            message_box.style.opacity = '1'
            message_box.style.top = '10px'
            setTimeout(() => {
                message_box.style.opacity = '0'
                message_box.style.top = '0px'
            }, 2000);
            // opacity: 0;
            message_box.innerText = text
            if (type == 'success') {
                message_box.className = 'message_success'
            }
            if (type == 'warning') {
                message_box.className = 'message_error'

            }
            if (type == 'error') {
                message_box.className = 'message_warning'

            }
            if (type == 'info') {
                message_box.className = 'message_info'

            }
        }
        // console.clear();
        let ipc = require('electron').ipcRenderer;
        const loginBtn = document.getElementById('login');
        const signupBtn = document.getElementById('signup');


        loginBtn.addEventListener('click', (e) => {

            let parent = e.target.parentNode.parentNode;
            Array.from(e.target.parentNode.parentNode.classList).find((element) => {

                if (element !== "slide-up") {
                    if (loginBtn.innerText == '设 置') {
                        loginBtn.innerText = '返 回'

                    } else {
                        loginBtn.innerText = '设 置'
                    }
                    parent.classList.add('slide-up')
                } else {

                    signupBtn.parentNode.classList.add('slide-up')
                    parent.classList.remove('slide-up')
                }
            });
        });

        signupBtn.addEventListener('click', (e) => {


            let parent = e.target.parentNode;
            Array.from(e.target.parentNode.classList).find((element) => {
                if (element !== "slide-up") {
                    parent.classList.add('slide-up')
                } else {
                    loginBtn.parentNode.parentNode.classList.add('slide-up')
                    parent.classList.remove('slide-up')
                }
            });

        });
        document.getElementById('min').addEventListener('click', () => {

            ipc.send('window-min');

        })
        document.getElementById('close').addEventListener('click', () => {


            ipc.send('window-close');

        })
        document.getElementById('min2').addEventListener('click', () => {

            ipc.send('window-min');

        })
        document.getElementById('close2').addEventListener('click', () => {


            ipc.send('window-close');

        })


        var body = document.getElementsByTagName('body')[0];
        body.addEventListener('paste', function (e) {
            var clipboard = e.clipboardData;
            console.log(clipboard)
            var type = clipboard.items[0].type;
            if (type.match(/image/)) {
                messageBox('成 功 !', 'success')
                var blob = clipboard.items[0].getAsFile();
                var file = new FileReader();
                file.addEventListener('loadend', function (e) {
                    // document.getElementById('result').value = e.target.result;
                    // console.log(e.target.result)
                    console.log(e.target.result.substr(22, e.target.result.length))

                    // setTimeout(loadingStart,500)
                    imageBase = e.target.result.substr(22, e.target.result.length)

                    //获取   access_token
                    //调用百度接口 
                    //获取 数据库中 基本数据
                    loadingStart()
                    document.getElementById('solveBox').style.display = 'block'
                    ipc.send('getData', 'all')
                });
                file.readAsDataURL(blob);
                document.getElementById('copy').style.backgroundColor = 'rgba(67, 255, 166, 0.8)'
                document.getElementById('copy').style.color = 'rgba(255, 255, 255, 1)'

            } else {

                document.getElementById('copy').style.backgroundColor = 'rgba(255, 109, 109, 0.8)'
                document.getElementById('copy').style.color = 'rgba(255, 255, 255, 1)'
                let data = {
                imageBase:'data:image/png;base64,'+imageBase,
                describe:describe
            }
            ipc.send('imageBaseSolve',data);
            }
        });

        /**
         * 保存 未解决截图
         * ------------------------------------------------------------------
         */

        //解决
        
        document.getElementById('solve').addEventListener('click', (e) => {
            document.getElementById('solveBox').style.display = 'none'
            messageBox('感谢反馈!', 'success')
        })
        //未解决
        document.getElementById('notSolve').addEventListener('click', (e) => {
            document.getElementById('solveBox').style.display = 'none'
            //保存到数据库

            //判断当前问题截图数据是否在数据库中  
            let data = {
                imageBase:'data:image/png;base64,'+imageBase,
                describe:describe
            }
            ipc.send('imageBaseSolve',data);
        })

        ipc.on('isThere',(event, message) => {
            if(message == true){
                messageBox('感谢反馈!', 'success')
            }
            if(message == false){
                messageBox('感谢反馈!', 'success')
            }
        })


        /**
         * 返回 逻辑
         * ------------------------------------------------------------------
         */
        document.getElementById('back').addEventListener('click', (e) => {
            document.getElementById('tow').style.display = 'none'
            document.getElementById('form-structor').style.display = 'block'
            
        })

        /**
         * 判断是否填入
         * ------------------------------------------------------------------
         */

        function isFill(data) {
            console.log(data)

            for (let iterator in data) {
                console.log(data[iterator])
                if (data[iterator] == '') {
                    messageBox('参数不为空!', 'warning')
                    return false
                }
            }
            return true
        }
        //百度 AccessToken 获取
        function getAccessToken() {
            let arg = {
                AK: document.getElementById('AK').value,
                SK: document.getElementById('SK').value,
                OcrUrl: document.getElementById('OcrUrl').value,
                AccessTokenUrl: document.getElementById('AccessTokenUrl').value,
            }

            axiosPackage.post(arg.AccessTokenUrl, {
                grant_type: 'client_credentials',
                client_id: arg.AK,
                client_secret: arg.SK,
            }).then((res) => {

                document.getElementById('AccessToken').value = res.data.session_key
                ipc.send('preservation', {
                    AK: document.getElementById('AK').value,
                    SK: document.getElementById('SK').value,
                    OcrUrl: document.getElementById('OcrUrl').value,
                    AccessToken: document.getElementById('AccessToken').value,

                    AccessTokenUrl: document.getElementById('AccessTokenUrl').value,
                });
            })
        }

        /**
         * 百度OCR & 资源匹配
         * ------------------------------------------------------------------
         */
        ipc.on('toOcr', (event, message) => {
            console.log('message')
            axiosPackage.post(message.OcrUrl, {
                access_token: message.AccessToken,
                image: imageBase
            }).then((res) => {
                getBaiduOcrBackText(res.data.words_result)
                getThe()
            })
        })
        document.getElementById('re_search').addEventListener('click', (e) => {
            getThe()

        })

        function getThe() {

            loadingStart()
            axiosPackage.post('https://nsh.leanapp.cn/main/data', {
                content: document.getElementById('textarea_text').value,

            }).then((res) => {
                loadingEnd()
                if (res.data.results.length != 0) {
                    document.getElementById('tow').style.display = 'block'
                    document.getElementById('retrieval').style.display = 'block'
                    document.getElementById('search').style.display = 'none'
                    document.getElementById('towsearch').style.display = 'block'



                    document.getElementById('form-structor').style.display = 'none'
                    document.getElementById('solveBox').style.display = 'block'
                    let htmlText = ''
                    for (let iterator of res.data.results) {
                        console.log(iterator)
                        htmlText += `
                    <p class="item">问:&#32;<span>
                   ` +
                            iterator.q + '</span><br/>答:&#32;<span>' +
                            iterator.a +
                            `
                    </span>
                    </p>
                    `

                    }
                    console.log(htmlText)
                    document.getElementById('retrieval').innerHTML = htmlText
                } else {
                    document.getElementById('tow').style.display = 'block'
                    document.getElementById('search').style.display = 'block'
                    document.getElementById('retrieval').style.display = 'none'
                    document.getElementById('form-structor').style.display = 'none'
                    document.getElementById('towsearch').style.display = 'none'
                    document.getElementById('solveBox').style.display = 'none'



                }

            })

        }

        function getBaiduOcrBackText(textList) {
            let text = ''
            for (let iterator of textList) {
                text += iterator.words
            }
            describe = text
            document.getElementById('textarea_text').value = text


            // return '测试用文本'
        }


        /**
         * 百度搜索
         * ------------------------------------------------------------------
         */
        document.getElementById('tosearch').addEventListener('click', () => {
            ipc.send('baiduSearch', 'https://www.baidu.com/s?wd=' + document.getElementById('textarea_text').value)
        })
        document.getElementById('towsearch').addEventListener('click', () => {
            ipc.send('baiduSearch', 'https://www.baidu.com/s?wd=' + document.getElementById('textarea_text').value)
        })

        /**
         * 保存配置
         * ------------------------------------------------------------------
         */
        document.getElementById('preservation').addEventListener('click', () => {


            if (document.getElementById('AccessToken').value == '') {
                let data = {
                    AK: document.getElementById('AK').value,
                    SK: document.getElementById('SK').value,
                    OcrUrl: document.getElementById('OcrUrl').value,
                }
                // console.log(data)
                //获取

                if (isFill(data) == true) {
                    getAccessToken()
                }



            } else {
                ipc.send('preservation', {
                    AK: document.getElementById('AK').value,
                    SK: document.getElementById('SK').value,
                    OcrUrl: document.getElementById('OcrUrl').value,
                    AccessToken: document.getElementById('AccessToken').value,

                    AccessTokenUrl: document.getElementById('AccessTokenUrl').value,
                });
            }


        })

        ipc.on('isGetAccessToken', function (event, AccessToken) {
            if (AccessToken != false) {
                ipc.send('preservation', {
                    AK: document.getElementById('AK').value,
                    SK: document.getElementById('SK').value,
                    OcrUrl: document.getElementById('OcrUrl').value,
                    AccessToken: AccessToken,

                    AccessTokenUrl: document.getElementById('AccessTokenUrl').value,
                });

            } else {
                messageBox('AccessToken获取失败!', 'error')
            }


        })
        ipc.on('upDatasuccess', function (event, message) {
            if (message == true) {
                messageBox('成 功!', 'success')

            } else {
                messageBox('失 败!', 'error')
            }


        })
        ipc.on('data', function (event, message) {


            document.getElementById('AK').placeholder = 'AK:' + message[0].AK
            document.getElementById('SK').placeholder = 'SK:' + message[0].SK

            document.getElementById('OcrUrl').placeholder = 'OcrUrl:' + message[0].OcrUrl
            document.getElementById('AccessToken').placeholder = 'AccessToken:' + message[0].AccessToken
            document.getElementById('AccessTokenUrl').placeholder = 'AccessTokenUrl:' + message[0].AccessTokenUrl

        });
    </script>
</body>

</html>